<template>
	<view class="list">
		<navigator :url="`/pages/course/detail/index?courseId=${list.id}`" class="list-item" v-for="list in listdata" :key="list.id">
			<image :src="list.cover" mode="widthFix" class="list-img"></image>
			<view class="list-message">
				<text class="list-title">{{list.title}}</text>
				<view class="list-info">
					<text class="info-price">￥{{list.price}}</text>&nbsp;
					<text class="info-person">{{list.buyCount}}人购买</text>
				</view>
			</view>
		</navigator>
		<view class="nomore" v-if="params.page>pages">---没有更多了---</view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad,onReachBottom } from '@dcloudio/uni-app';
	import courseApi from '@/Api/course'
	import { ref, reactive } from 'vue'
	const pages = ref(1)
	// const limit = ref(10)
	const params = ref({
		page:1,
		limit:10
	})
	const listdata = ref([])
	type StatusType = 'more' | 'nomore' | 'loading' |'error'
	const status = ref<StatusType>('more')
	const getListdata = async () => {
		status.value = 'loading'
		const result = await courseApi.getcourseData(params.value)
		if(result.code == 200){
			if(result.data.items.length<10){
				status.value = 'nomore'
			}else{
				status.value = 'more'
			}
			
		}else{
			status.value = 'nomore'
		}
		listdata.value.push(...result.data.items)
		params.value.page++
	}
	onLoad((options) => {
		getListdata()
		// console.log(options)
	})
	onReachBottom(()=>{
		status.value === 'more' && getListdata()
	})
</script>

<style lang="less">
	.list {
		// height: 100%;
		background-color: #eee;

		.list-item {
			padding: 20upx;
			display: flex;
			background-color: #fff;
			margin-bottom: 20upx;

			.list-img {
				width: 30%;

			}

			.list-message {
				display: flex;
				justify-content: space-around;
				flex-direction: column;
				padding: 20upx;

				.list-title {
					font-size: 24upx;
					font-weight: bold;
					margin-bottom: 15upx;
				}

				.list-info {
					.info-price {
						color: red;
						font-size: 30upx;
					}

					.info-person {
						font-size: 24upx;
						color: dimgray;
					}
				}
			}
		}
		.nomore{
			height: 100upx;
			line-height: 100upx;
			text-align: center;
			background-color: #eee;
			font-size: 28upx;
			color: darkred;
		}
	}
</style>